function Magnifier() {
    // 选择程序需要的数据(元素)
    this.small_img_ele = document.querySelector(".small-img");
    this.big_img = document.querySelector(".big-img img")
    this.big_img_ele = document.querySelector(".big-img");
    this.focus_ele = document.querySelector(".focus");
    // 计算container里面的位置信息; 

    this.container_ele = document.querySelector(".goods-img-box");

    this.container_offset = {
        left: this.container_ele.offsetLeft
    }

    this.focus_size = {
            width: parseInt(getComputedStyle(this.focus_ele).width),
            height: parseInt(getComputedStyle(this.focus_ele).height)
        }
        // console.log(this.focus_size);
}
Magnifier.prototype.bindEvent = function() {

    var mag = this;
    this.small_img_ele.addEventListener("mouseover", function() {
        // 调用显示隐藏功能; 
        mag.toggle("show");
    })
    this.small_img_ele.addEventListener("mouseout", function() {
        // 调用显示隐藏功能; 
        mag.toggle("hide");
    })
    this.small_img_ele.addEventListener("mousemove", function(evt) {
        // 给程序当前鼠标的位置; 
        mag.focusMove(evt.clientX, evt.clientY);
        mag.bigImgMove();
    });

}
Magnifier.prototype.toggle = function(type) {
    switch (type) {
        case "show":
            this.big_img_ele.style.display = "block";
            this.focus_ele.style.display = "block";
            break;
        case "hide":
            this.big_img_ele.style.display = "none";
            this.focus_ele.style.display = "none";
            break;
    }
}

Magnifier.prototype.focusMove = function(x, y) {

        var _left = x - this.container_offset.left - this.focus_size.width / 2;
        // top 是关键字 ，不能直接用做变量名

        var _top = y - this.focus_size.height / 2;
        // 边界检测 : 
        // 数值不能小于最小值, 数值也不能大于最大值; 
        // - 判断条件 ， 变量不能小于最小值，如果小于最小值我们就让他变为最小值; 
        // - 变量也不能大于最大值，如果大于最大值，那么我们就让他变为最小值; 
        if (_left < 0) {
            _left = 0;
        }
        if (_top < 0) {
            _top = 0;
        }
        if (_left > 150) {
            _left = 150;
        }
        if (_top > 150) {
            _top = 150;
        }
        this.focus_ele.style.left = _left + "px";
        this.focus_ele.style.top = _top + "px";

        // console.log( _left / 150 , _top / 150 );
        // 我们为了让bigImgMove 可以访问到我们计算出的百分比; 
        // - 把 计算出的百分比放入到实例对象之中; 
        this.prop_left = _left / 150;
        this.prop_top = _top / 150;
    }
    // 跨函数获取数据; 
Magnifier.prototype.bigImgMove = function() {
    // console.log( this.prop_left  , this.prop_top );
    this.big_img.style.left = -this.prop_left * 250 + "px";
    this.big_img.style.top = -this.prop_top * 250 + "px";
}


var m = new Magnifier();
m.bindEvent();
// 小任务 : 
// - 点击下方图片按钮， 根据按钮下标获取对应的图片地址; 
// - 给当前的大图小图里面的图片地址进行更换;